{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "products/monitor/base.html" %}
{% from "macros-protocol.html" import split with context %}
{% from "products/monitor/cms/includes/macros.html" import split_media with context %}

{% if page.seo_title %}
  {% set meta_title = page.seo_title %}
{% else %}
  {% set meta_title = page.title %}
{% endif %}

{% block page_title %}{{ meta_title }}{% endblock %}
{% block page_desc %}{{ page.search_description }}{% endblock %}

{% set _utm_source = 'www.mozilla.org-monitor-article-page' %}
{% set _utm_campaign = 'monitor-article-page' %}
{% set _params = '?utm_source=' ~ _utm_source ~ '&utm_medium=referral&utm_campaign=' ~ _utm_campaign %}

{% block page_css %}
  {{ css_bundle('cms-base')}}
  {{ css_bundle('monitor-article') }}
{% endblock %}

{% block content %}

  {% include 'products/monitor/cms/includes/subnav.html' %}
  {% include 'products/monitor/cms/includes/breadcrumbs.html' %}

  <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left">
    <aside class="mzp-l-sidebar">
      <div class="c-toc">
        <h3>{{ ftl('ui-contents') }}</h3>
        <ul>
          {% for heading in toc %}
            <li><a href="#{{ heading['id'] }}">{{ heading.get_text() }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </aside>

    <main class="mzp-l-main">
    <article class="mzp-c-article mzp-u-rich-text">
      <h1 class="mzp-c-article-title">{{ page.title }}</h1>
      <p class="c-subhead">{{ page.subheading|richtext }}</p>

      {{ page.summary|richtext }}

      {% if page.call_to_action_middle %}
        <section class="c-protect c-protect-middle">
          {% call split(
            block_class=' mzp-l-split-center-on-sm-md mzp-t-content-xl ',
            image=split_media(page.call_to_action_middle.split_image),
            media_class='mzp-l-split-h-center',
            media_after=True
          ) %}
            <h2>{{ page.call_to_action_middle.split_heading }}</h2>
            <p class="c-subhead">{{ page.call_to_action_middle.split_subheading }}</p>
            {{ page.call_to_action_middle.split_content|richtext }}
            <p><a href="{{ page.call_to_action_middle.split_button_link }}{{ _params }}" class="mzp-c-button">{{ page.call_to_action_middle.split_button_text }}</a></p>
          {% endcall %}
        </section>
      {% endif %}

      {{ page.content|richtext }}

    </article>
    </main>
  </div>

  {% if page.call_to_action_bottom %}
    <section class="c-protect">
      {% call split(
        block_class=' mzp-l-split-center-on-sm-md mzp-t-content-xl',
        image=split_media(page.call_to_action_bottom.split_image),
        media_class='mzp-l-split-h-center',
        media_after=True
      ) %}
        <h2>{{ page.call_to_action_bottom.split_heading }}</h2>
        <p class="c-subhead">{{ page.call_to_action_bottom.split_subheading }}</p>
        {{ page.call_to_action_bottom.split_content|richtext }}
        <p><a href="{{ page.call_to_action_bottom.split_button_link }}{{ _params }}" class="mzp-c-button">{{ page.call_to_action_bottom.split_button_text }}</a></p>
      {% endcall %}
    </section>
  {% endif %}

{% endblock %}


{% block js %}
  {{ js_bundle('monitor_article') }}
{% endblock %}
